'use client';

import { cn } from '@/lib/utils';
import { useState, useMemo } from 'react';
import { useMenu } from '@/contexts/MenuContext';

interface SidebarProps {
  sysCode: string;
}

export function Sidebar({ sysCode }: SidebarProps) {
  const { menus } = useMenu();
  const nav = useMemo(() => menus.find(menu => menu.sysCode === sysCode), [menus, sysCode]);
  const [activeCategory, setActiveCategory] = useState<string | undefined>(
    nav?.categories?.[0]?.id
  );

  return (
    <aside className="hidden lg:block w-[220px] border-r border-border bg-sidebar overflow-y-auto">
      <nav className="p-3 space-y-1">
        {nav?.categories?.map(category => (
          <a
            key={category.id}
            href={`#${category.id}`}
            onClick={() => setActiveCategory(category.id)}
            className={cn(
              'w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors',
              activeCategory === category.id
                ? 'bg-primary/10 text-primary font-medium'
                : 'text-sidebar-foreground hover:bg-sidebar-accent'
            )}
          >
            <span className="flex-1 text-left">{category.name}</span>
          </a>
        ))}
      </nav>
    </aside>
  );
}
